<template>
  <el-upload
    ref="uploadRef"
    action=""
    list-type="text"
    :accept="props.upInfo.acceptFile"
    :multiple="props.upInfo.multiple"
    :limit="props.upInfo.limitNum"
    :auto-upload="false"
    :on-exceed="handleExceed"
    :before-upload="beforeUpdata"
    :on-change="handleChange"
    :show-file-list="false"
    :file-list="props.upInfo.upFile"
    :on-success="handleSuccess"
  >
    <template #default> <el-button plain>本地上传</el-button></template>
  </el-upload>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, computed } from 'vue'
  import { ElForm, ElMessage } from 'element-plus'
  import type { UploadFile } from 'element-plus/es/components/upload/src/upload'
  import { uploadFile2 } from '@/api/common'
  import { getSetionId,getImage_wh } from '@/utils/utils'
  const uploadRef = ref(null)
  const emit = defineEmits(['submit'])
  const formRef = ref<InstanceType<typeof ElForm>>()
  const props = defineProps(['upInfo', 'remainNum'])
  const beforeUpdata = async (file: any) => {
    const {acceptFile,limitSize} = props.upInfo
    const is2M = file.size / 1024 / 1024 <= limitSize
    let tips = '视频'
    switch (props.upInfo.type) {
      case 2:
        tips = '图片'
        const { W, H } = await getImage_wh(file)
        let ext = file.name.substring(file.name.lastIndexOf('.'))
        if (acceptFile.indexOf(ext) == -1) {
          ElMessage.warning(`该图片是${ext}格式,请上传${acceptFile}格式图片`)
          handleRemove(file)
          return
        }
        if (W > 1440) {
          ElMessage.warning(`该图片宽度${W}px,超过最大图片尺寸宽度1440px`)
          handleRemove(file)
          return
        }
        if (H > 1080) {
          ElMessage.warning(`该图片高度${H}px,超过最大图片尺寸高度1080px`)
          handleRemove(file)
          return
        }
        break
      case 3:
        tips = '语音'
        break
      case 4:
        tips = '视频'
        break
      case 5:
        tips = '文件'
        break
      default:
        tips = ''
    }
    if (!is2M) {
      ElMessage.warning(`上传的${tips}最大支持${limitSize}M`)
      handleRemove(file)
      return
    }
    return is2M
  }
  const handleRemove = (file: UploadFile) => {
    const filePath = file.url
    const i = props.upInfo.upFile.findIndex((x) => x.url === filePath)
    props.upInfo.upFile.splice(i, 1)
    emit('submit', props.upInfo.upFile)
  }
  const Remove = (file: UploadFile, list: UploadFile[]) => {
    props.upInfo.upFile = list
    emit('submit', list)
  }
  // 上传文件
  const uploadImg = async (file: any) => {
    file = file.raw
    let flag = beforeUpdata(file)
    if (!flag) return
    return await uploadFile2({
      file,
      fileName: file.name
    })
  }
  const handleSuccess = (response: any, file: UploadFile, fileList: UploadFile[]) => {}
  // 上传改变
  const handleChange = async (file: UploadFile, list: UploadFile[]) => {
    let existFile = list.slice(0, list.length - 1).find((f) => f.name === file.name)
    if (existFile) {
      ElMessage.error('当前文件已经存在!')
      list.pop()
      return
    }
    try {
      const data: any = await uploadImg(file)
      props.upInfo.upFile.push(data)
      if (list.length == props.upInfo.upFile.length) {
        emit('submit', props.upInfo.upFile)
        uploadRef.value.clearFiles()
      }
    } catch (e) {
      handleRemove(file)
    }
  }
  const handleExceed = (file: UploadFile, list: UploadFile[]) => {
    ElMessage.warning(`当前限制选择 ${props.upInfo.limitNum} 个文件，本次选择了 ${file.length} 个文件，共选择了 ${file.length + list.length} 个文件`)
    Remove(file, list)
  }
</script>
<style lang="scss" scoped>
  .pre_img_box {
    overflow: hidden;
    .pre_image {
      display: block;
      margin: auto;
      max-height: 400px;
    }
  }
</style>
<style>
  .hide .el-upload--picture-card {
    display: none;
  }
  .upload_icon {
    width: 140px;
    height: 90px;
  }
</style>
